<template>
	<view>
		<cu-custom :key="'header'+headerKey" bgColor="bg-blue-light" :isBack="true"  backText="返回" title="我的培训经历"></cu-custom>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<view class="cu-card article " v-for="(item, index) in list" :key="index" >
			<view class="cu-item bg-white shadow card" style="border-radius: 0rpx;">
				<view style="padding: 30rpx 40rpx 30rpx 40rpx;">
					<view class="flex justify-start align-center" style="min-height: 60rpx;line-height: 50rpx;">
						<view class="bg-blue text-center" style="border-radius: 10rpx 0 10rpx 0;width: 80rpx; margin-right: 30rpx;">
							项目
						</view>
						<view class="text-xl text-bold " style="width: 500rpx;">
							{{item.programName}}
						</view>
					</view>
					<view class="flex justify-between align-center">
						<view>
							<text class="text-gray">项目计划日期：</text><text class="text-gray">{{item.begDateText}}至{{item.endDateText}}</text>
						</view>
						<view v-if="item.status=='not_start'||item.status=='finish'" class='cu-tag round bg-grey'>{{item.statusName}}</view>
						<view v-else-if ="item.status=='ing'" class='cu-tag round bg-green'>{{item.statusName}}</view>
						<view v-else-if="item.personStatus=='sign_in'||item.personStatus=='sign_out'" class='cu-tag round bg-blue'>{{item.personStatusName}}</view>
						<view v-else class='cu-tag round bg-red'>{{item.personStatusName}}</view>
					</view>
					<view class="flex justify-start align-center">
						<view class="text-gray">
							上课地点:
						</view>
						<view class="text-gray">
							{{item.address}}
						</view>
					</view>
					<view class="flex justify-start align-center">
						<view class="text-gray">
							总课时:
						</view>
						<view class="text-gray">
							{{item.classHours}}
						</view>
						<view class="text-gray" style="width: 200rpx;">
							
						</view>
						<view class="text-gray">
							已完成课时:
						</view>
						<view class="text-gray">
							{{item.finishClassHours}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/society/train/myTrain.js';
	export default {
		onShow() {
			this.headerKey += 1;
		},
		data() {
			return {
				headerKey:0,
				TabCur: 0,
				scrollLeft: 0,
				list:[{courseName:"123"}],
				tabs:['全部','未开始','学习中','已结束']
			}
		},
		onReady(){
			this.queryData();
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.queryData();
			},
			queryData(){
				let status = 'all';
				if(this.TabCur==0){
					status = 'all';
				}else if(this.TabCur==1){
					status = 'not_start';
				}else if(this.TabCur==2){
					status = 'ing';
				}else{
					status = 'finish';
				}
				const data = {}
				data.status=status;
				console.log(data)
				this.$http.post(api.getSelectDetailByStatus, data).then(res => {
					this.list= res.result;
					console.log("出参：");
					console.log(this.list);
				}).catch(error => {	
				})
			}
		}
	}
</script>

<style>
.card{
	margin: 0rpx;
}

</style>
